<div class="card">
  <div class="no-image">
    <svg
      class="icon"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="1.1"
        d="m3 16 5-7 6 6.5m6.5 2.5L16 13l-4.286 6M14 10h.01M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"
      ></path>
    </svg>
  </div>
  <div class="content">
    <p class="name">UIVERSE</p>
    <p class="time">03.04.2024 - 04.04.2024</p>
  </div>
</div>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, card, html, css */
.card {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  width: 285px;
  padding: 8px;
  background-color: #282727;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  aspect-ratio: 16/12;
  transition: all 0.3s ease;
}

.card .no-image {
  border: 2px dashed #373737;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  aspect-ratio: 16/8;
}

.card .no-image .icon {
  width: 60px;
  color: #373737;
}

.card .image {
  width: 100%;
  aspect-ratio: 16/8;
}

.card .image .picture {
  border-radius: 8px;
  width: inherit;
  aspect-ratio: 16/8;
}

.card .content {
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  padding-left: 4px;
}

.card .content .name {
  font-size: 1.5rem;
  color: #ffffff;
}

.card .content .time {
  padding-top: 12px;
  font-size: 0.875rem;
  color: #c5c5c5;
}

.card:hover {
  -webkit-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
  -moz-box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
  box-shadow: 0px 0px 15px -8px rgba(66, 68, 90, 1);
}

</style>
    